
<!DOCTYPE html>
<html>

<head>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>H+ 后台主题UI框架 - 空白页</title>
    <meta name="keywords" content="">
    <meta name="description" content="">

     <link rel="shortcut icon" href="__STATIC__/layout/favicon.ico">
     <link href="__STATIC__/layout/css/bootstrap.min.css?v=3.3.6" rel="stylesheet">
    <link href="__STATIC__/layout/css/font-awesome.css?v=4.4.0" rel="stylesheet">
     <!-- jqgrid-->
    <link href="__STATIC__/layout/css/animate.css" rel="stylesheet">
    <link href="__STATIC__/layout/css/style.css?v=4.1.0" rel="stylesheet">
    <link href="__STATIC__/layout/css/plugins/sweetalert/sweetalert.css" rel="stylesheet">
    <link href="__STATIC__/layout/css/gyq.css" rel="stylesheet">
    <link rel="stylesheet" href="__STATIC__/layout/css/demo.css" type="text/css">
    <style>
    </style>
</head>

<body style="color:#333;padding:3px;">
    <!-- 标题 -->
    <div class="page-heade">
        <h2 class="title_color text-center">2017年东南大区营销费用报表-费用科目占比分析(单位：元)</h2>
    </div>
    <!-- 标题 -->
    <div>
    <form action=""  class="form-inline">
   <div id="mainImgDiv" style="margin-top: 20px; height: 460px"></div>
</form>
    </div>
    <!-- 全局js -->
    <script src="__STATIC__/layout/js/jquery.min.js?v=2.1.4"></script>
    <script src="__STATIC__/layout/js/bootstrap.min.js?v=3.3.6"></script>
    <!-- <script src="js/plugins/metisMenu/jquery.metisMenu.js"></script> -->
    <script src="__STATIC__/layout/js/plugins/slimscroll/jquery.slimscroll.min.js"></script>
     <!-- <script src="js/plugins/layer/laydate/laydate.js"></script> -->
      <script src="__STATIC__/layout/js/plugins/echarts/echarts-all.js"></script>

      <script src="__STATIC__/layout/js/common.js"></script>
    <script>
        $(function(){
            /*饼状图*/
       var pieChart = echarts.init(document.getElementById("mainImgDiv"));
       var pieoption = {
        tooltip : {
            trigger: 'item',
            formatter: "{a} <br/>{b} : {c} ({d}%)"
        },
        legend: {
              orient: 'vertical',
              x: 'left',
            data:['堆头费','端架','DM费','导购工资','条码费','主题活动费用','合同返利','通信费','交通费','促销员工资','新品开发费','销售物料POSM','消费者价格折扣','渠道价格折扣费','调研费','路演费','媒体广告费']
        },
        series : [
            {
                name:'访问来源',
                type:'pie',
                radius : '60%',
                // selectedMode: 'single', //单一选中模式 
                center: ['50%', '60%'],
                data:[
                    {"value":4982, "name":'堆头费'},
                    {value:8489044.98, name:'端架'},
                    {value:419.76, name:'DM费'},
                    {value:9540, name:'导购工资'},
                    {value:4540, name:'条码费'},
                    {value:3540, name:'主题活动费用'},
                    {value:5440, name:'合同返利'},
                    {value:3940, name:'通信费'},
                    {value:6940, name:'交通费'},
                    {value:5940, name:'促销员工资'},
                    {value:4240, name:'新品开发费'},
                    {value:3840, name:'销售物料POSM'},
                    {value:4840, name:'消费者价格折扣'},
                    {value:5240, name:'渠道价格折扣费'},
                    {value:7140, name:'调研费'},
                    {value:4440, name:'路演费'},
                    {value:4740, name:'媒体广告费'}
                ],
                itemStyle:{  
                emphasis: {  
                    shadowBlur: 10,  
                    shadowOffsetX: 0,  
                    shadowColor: 'rgba(0, 0, 0, 0.5)'  
                }  
              }  
            }
        ]
    };
    pieChart.setOption(pieoption);
    $(window).resize(pieChart.resize);
  })

    </script>
</body>

</html>
